import React, { useEffect } from "react";
import { Layout, message, Popconfirm, Button } from "antd";
import { MenuUnfoldOutlined, MenuFoldOutlined } from "@ant-design/icons";
import { useStore } from "@/store";
import { observer } from "mobx-react-lite";
import "./index.scss";
const { Header } = Layout;

function LayoutHeader({ collapsed, toggle, navigate }) {
  const { userStore, loginStore } = useStore();
  //获取用户信息
  useEffect(() => {
    try {
      //这里因为调用store的方法，修改了状态，会导致页面重新渲染一次
      userStore.getUserInfo();
    } catch (e) {
      message.error(e.response?.data?.message);
    }
  }, [userStore]);
  //确认退出登录
  function confirm() {
    loginStore.loginOut();
    navigate("/login", { replace: true });
    message.success("退出成功！");
  }
  return (
    <>
      <Header className='site-layout-background' style={{ padding: 0 }}>
        {React.createElement(
          collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
          {
            className: "trigger",
            onClick: toggle,
          }
        )}
        <div className='user-info'>
          <span className='user-name'>{userStore.userInfo.name}</span>
          <Popconfirm
            placement='bottomRight'
            onConfirm={confirm}
            title='确认要退出吗？'
            cancelText='取消'
            okText='确认'>
            <Button type='primary'>退出登录</Button>
          </Popconfirm>
        </div>
      </Header>
    </>
  );
}
export default observer(LayoutHeader);
